<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        a,
        img {
            border: 0;
        }
        
        #box {
            margin: 0 auto;
            position: relative;
        }
        
        .item {
            box-shadow: 2px 2px 2px #999;
            position: absolute;
            width: 210px;
        }
        
        .item img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="item"><img src="images/01.jpg"></div>
        <div class="item"><img src="images/02.jpg"></div>
        <div class="item"><img src="images/03.jpg"></div>
        <div class="item"><img src="images/04.jpg"></div>
        <div class="item"><img src="images/05.jpg"></div>
        <div class="item"><img src="images/06.jpg"></div>
        <div class="item"><img src="images/07.jpg"></div>
        <div class="item"><img src="images/08.jpg"></div>
        <div class="item"><img src="images/09.jpg"></div>
        <div class="item"><img src="images/10.jpg"></div>
        <div class="item"><img src="images/11.jpg"></div>
        <div class="item"><img src="images/12.jpg"></div>
        <div class="item"><img src="images/19.jpg"></div>
        <div class="item"><img src="images/20.jpg"></div>
        <div class="item"><img src="images/13.jpg"></div>
        <div class="item"><img src="images/14.jpg"></div>
        <div class="item"><img src="images/15.jpg"></div>
        <div class="item"><img src="images/16.jpg"></div>
        <div class="item"><img src="images/17.jpg"></div>
        <div class="item"><img src="images/18.jpg"></div>
        <div class="item"><img src="images/21.jpg"></div>
        <div class="item"><img src="images/22.jpg"></div>
        <div class="item"><img src="images/23.jpg"></div>
        <div class="item"><img src="images/24.jpg"></div>
        <div class="item"><img src="images/25.jpg"></div>
        <div class="item"><img src="images/26.jpg"></div>
        <div class="item"><img src="images/27.jpg"></div>
        <div class="item"><img src="images/28.jpg"></div>
        <div class="item"><img src="images/29.jpg"></div>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            var box = document.querySelector('#box');
            //直接将items转化为数组,方便后续
            var items = Array.from(document.querySelectorAll('.item'));
            // 记录铺图片的时候需要跳过的数量
            var len = 0;
            //获取浏览器宽度
            var bodyWidth = document.documentElement.clientWidth || document.body.clientWidth;
            //每张图片之间的间隙
            var gap = 10;
            //图片宽度
            var width = items[0].offsetWidth;
            //判断一行能放下几列
            var cols = parseInt(bodyWidth / (width + gap));
            //通过列数来定义数组,计算每一列的高度
            var arr = new Array(cols);
            //根据列数计算box的宽度(居中)
            box.style.width = cols * width + (cols - 1) * gap + 'px';

            //铺图片
            function waterfall() {
                for (var i = len; i < items.length; i++) {
                    //第一行(通过图片所在的div，控制left，top来铺图)
                    if (i < cols) {
                        items[i].style.top = 0;
                        items[i].style.left = i * (width + gap) + 'px';
                        //当前列的高度等于当前图片的高度 + gap
                        arr[i] = items[i].offsetHeight + gap;
                    } else {
                        //找到arr里的最小值
                        console.log(i);
                        //默认在0处的高度最小
                        var minHeight = 0;
                        for (var j = 0; j < cols; j++) {
                            if (arr[minHeight] > arr[j]) {
                                minHeight = j;
                            }
                        }
                    }
                    //后面行,从最小高度处开始排
                    items[i].style.left = minHeight * (width + gap) + 'px';
                    items[i].style.top = arr[minHeight] + 'px';
                    //更新当前列高度
                    arr[minHeight] += items[i].offsetHeight + gap;
                }
            }
            waterfall();

            //当滚动条滑到底部触发瀑布流
            window.onscroll = function() {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 获取最大高度
                // console.log(box.clientHeight);定位后,子元素不能撑开高度
                //找列高,arr
                var maxHeight = items[items.length - 1].offsetTop + items[items.length - 1].offsetHeight;
                var bodyHeight = document.documentElement.clientHeight || document.body.scrollHeight;
                if (scrollTop === maxHeight - bodyHeight) {
                    console.log('到达底部');
                    // 从后端加载更多图片
                    // 自己用一个定时器来模拟0.5s之后从后端收到了图片加载
                    setTimeout(() => {
                        var json = [
                            "images/01.jpg",
                            "images/02.jpg",
                            "images/03.jpg",
                            "images/04.jpg",
                            "images/05.jpg",
                            "images/06.jpg",
                            "images/07.jpg",
                            "images/08.jpg",
                            "images/09.jpg",
                            "images/10.jpg",
                            "images/11.jpg",
                            "images/12.jpg",
                            "images/13.jpg",
                            "images/14.jpg",
                            "images/15.jpg",
                            "images/16.jpg",
                            "images/17.jpg"
                        ]

                        // 用一个数组设置图片是否加载完成的状态
                        var imgLoad = new Array();

                        //更新len的值
                        len = items.length;
                        json.forEach((img) => {
                            //新建div(<div class="item"><img src="images/01.jpg"></div>)
                            var div = document.createElement('div');
                            div.className = 'item';
                            div.innerHTML = `<img src = ${img}>`;
                            box.appendChild(div);

                            //把新建的item push到items最后
                            items.push(div);

                            //图片加载完后调用瀑布流函数
                            div.querySelector('img').onload = function() {
                                imgLoad.push(1);
                                if (imgLoad.length === json.length) {
                                    waterfall()
                                }
                            }
                        })
                    }, 500)
                }
            }
        }
    </script>
</body>

</html>